<template>
  <div>
    <el-form label-width="80px" :model="form">
      <el-form-item label="文章标题">
        <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
      </el-form-item>
      <el-form-item label="文章内容">
        <!--创建 wangeditor 挂载点 -->
        <div id="editor"></div>
      </el-form-item>
      <el-form-item label="文章来源">
        <el-radio v-model="form.stemfrom" label="原创">原创</el-radio>
        <el-radio v-model="form.stemfrom" label="转载">转载</el-radio>
      </el-form-item>

      <el-form-item>
        <el-button type="success" size="default" @click="submit"
          >更新文章</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Editor from "wangeditor";
import { updateArticle, getOneArticles } from "@/api/article";
export default {
  data() {
    return {
      form: {
        id: 0,
        _id: "",
        title: "",
        stemfrom: "",
        content: "",
        author: this.$store.state.user.username,
      },
      editor: null,
    };
  },
  created() {
    this.getDate();
  },
  mounted() {
    // 创建wangeditor实例
    this.editor = new Editor("#editor");
    //配置上传的服务器端口
    this.editor.config.uploadImgServer =
      "http://localhost:3000/upload/editor/img";
    // 配置上传的字段名
    this.editor.config.uploadFileName = "editorFile";
    // 配置上传的请求头
    this.editor.config.uploadImgHeaders = {
      authorization: "Bearer " + this.$store.state.user.token,
    };
    // 设置不需要的菜单项
    this.editor.config.excludeMenus = [
      "emoticon",
      "backColor",
      "code",
      "video",
    ];
    //  设置富文本编辑器的高度
    this.editor.config.height = 300;
    // 设置富文本编辑器的提示文字
    this.editor.config.placeholder = "编辑文章内容";
    // 配置上传图片接口
    this.editor.create();

    // 更好的解决办法 
    setTimeout(() => {
      this.editor.txt.html(this.form.content)
    }, 100);
  },

/**
 * 这里有bug 所以给个定时器处理异步比watch监听更好
 */
 //--------------------------------------
  // watch: {
  //   form: {
  //     // 将内容显示在富文本编辑器上
  //     handler(val) {
  //       // 初始化富文本编辑器的内容
  //         this.editor.txt.html(val.content) 
  //     },
  //     deep: true, //深度监听 普通监听无法监听到data里面对象的某个具体属性 但深度监听可以
  //   },
  // },

  //--------------------------------------




  methods: {
    // 请求数据
    async getDate() {
      let id = this.$route.query.id;
      const { data } = await getOneArticles({
        id,
      });
      if (data.code == 200) {
        const { result } = data;
        this.form.id = result.id;
        this.form.title = result.title;
        this.form.stemfrom = result.stemfrom;
        this.form.content = result.content;
      }
    },

    async submit() {
      //   富文本的内容
      let content = this.editor.txt.html();
      const { data } = await updateArticle({
        id: this.form.id,
        title: this.form.title,
        stemfrom: this.form.stemfrom, //来源
        content: content,
      });
      if (data.code == 200) {
        this.$message({
          message: "文章修改成功",
          type: "success",
        });
       
      } else {
        this.$message({
          message: "文章修改失败",
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>